<template>
    <div class="coloum_box" v-if="data">
        <div class="titel">
            <div class="img" v-if="data.avatar">
                <img :src="data.avatar.url">
            </div>
            <div class="titel_context">
                <h4>{{ data.title }}</h4>
                <h3>{{ data.description }}</h3>
            </div>
        </div>
        <div class="list" v-for="item, index in coloumList" :key="index">
            <router-link class="h5" :to='`/posts/${item._id}`'>{{ item.title }}</router-link>
            <div class="list_context">
                <div class="list_img" v-if="item.image">
                    <img :src="item.image.url">
                </div>
                <div class="list_context_text">
                    {{ item.excerpt }}
                </div>
            </div>
        </div>
        <div class="button my-1" v-if="more">
            <button class="btn btn-outline-light" @click="onMore()">加载更多</button>
        </div>
    </div>
</template>

<script lang='ts'>
interface coloumData {
    "_id": string,
    "title": string,
    "description": string,
    "avatar"?: {
        "_id": string,
        "url": string,
        "createdAt": string
    },
    "author": string,
    "createdAt": string
}
interface postListType {
    "count": number,
    "pageSize": number,
    "currentPage": number,
    "list": Array<{
        "_id": string,
        "title": string,
        "excerpt": string,
        "content": string,
        "image"?: {
            "_id": string,
            "url": string,
            "createdAt": string
        },
        "author": {
            "_id": string,
            "email": string,
            "nickName": string,
            "description": string,
            "avatar": string,
            "column": string,
            "createdAt": string
        },
        "column": string,
        "createdAt": string
    }>
}
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { reqSomeColumns, reqPostList } from '../../api/main'
export default defineComponent({
    name: 'Column',
    setup() {
        const page = ref<number>(1)
        const { params } = useRoute()
        const data = ref<coloumData | null>(null)
        const listData = ref<postListType | null>(null)
        const getListData = async (add: boolean) => {
            const result = (await reqPostList(params.id as string, page.value)).data as unknown as postListType
            const { value } = listData
            if (!value) {
                listData.value = result
            } else if (add) {
                const oldList = value.list
                listData.value = { ...result, list: oldList.concat(result.list) }
            }
            page.value = result.currentPage + 1
        }
        const more = computed(() => {
            if (listData.value) {
                const { count, currentPage, pageSize } = listData.value
                if (Math.floor(count / pageSize) < currentPage) return false
            }
            return true
        })
        const onMore = () => {
            if (more && listData.value) {
                getListData(true)
            }
        }
        const getData = async () => {
            data.value = (await reqSomeColumns(params.id as string)).data as unknown as coloumData
        }
        const coloumList = computed<postListType['list']>(() => {
            if (listData.value) {
                return listData.value.list
            } else {
                return []
            }
        })


        watch(() => params.id, () => {
            getData()
            getListData(false)
        })
        onMounted(() => {
            getData()
            getListData(true)
        })
        return { data, listData, coloumList, more, onMore }
    }
})
</script>
<style scoped lang="less">
.coloum_box {
    width: 100%;
    padding: 0 10%;

    .titel {
        width: 100%;
        height: 200px;
        border-bottom: 1px solid rgb(223, 223, 223);
        display: flex;
        padding-bottom: 10px;

        .img {
            width: 20%;
            display: flex;
            align-items: center;

            img {
                max-height: 100%;
                max-width: 100%;
                width: auto;
                height: auto;
                border: #0d6efd 2px solid;
            }
        }

        .titel_context {
            padding-left: 30px;
            flex: 80%;
            display: flex;
            justify-content: center;
            flex-direction: column;

            h1 {
                font-size: 30px;
            }

            h3 {
                color: rgb(108, 117, 125);
                font-size: 20px
            }
        }
    }

    .list {
        height: 250px;
        width: 100%;
        border: 1px solid rgb(223, 223, 223);
        margin-top: 20px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;

        .h5 {
            width: 100%;
            height: 20%;
            text-decoration: none;
            color: black;
            cursor: pointer;

            &:hover {
                color: #0d6efd;
            }
        }

        .list_context {
            height: 80%;
            display: flex;

            .list_img {
                flex: 20%;
                display: flex;
                align-items: center;
                overflow: hidden;

                img {
                    max-width: 100%;
                    max-height: 100%;
                    height: auto;
                    width: auto;
                    width: auto;
                }
            }

            .list_context_text {
                padding-left: 10px;
                flex: 80%;
                word-break: break-all;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 8;
                -webkit-box-orient: vertical;
                font-size: 18px;
                color: rgb(108, 117, 125);
            }
        }
    }
}

.button {
    width: 100%;
    display: flex;
    justify-content: center;

    button {
        background-color: #0d6efd;
    }
}
</style>